<!DOCTYPE html>
<html>

<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>

<body>
    <div id="example"></div>
    <script type="text/babel">
    /*
        JSX语法
        解析规则：
            遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；
            遇到代码块（以 { 开头），就用 JavaScript 规则解析
    
    */
        var names = ['Alice', 'Emily', 'Kate']; 
        ReactDOM.render(
            <div>
                { 
                    names.map(function (name, index) { 
                        //HTML 语言直接写在 JavaScript 语言之中
                        return  <div key={index}>Hello, {name}!</div>
                    })
                }
            </div>, 
            document.getElementById('example')
        );
    </script>
</body>

</html>